//银行卡详情弹窗

import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Cascader, Tooltip, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { mobile } from '@/utils/rule';
import { bankSearch, getAllArea } from '@/services/common';
import { personalBindCardOp } from '../../service';

const { Option } = Select;

const ChangShuBindCard = ({ accountNo, visible, handleOk, handleCancel }) => {

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  // 开户行下拉
  const [list, setList] = useState([]);
  const [areaData, setAreaData] = useState([]);

  useEffect(() => {
    if (visible == 1) {
      getList();
      getAreaList();
    }
  }, [visible])

  // 获取开户行下拉
  const getList = async () => {
    const res = await bankSearch({
      bankName: '',
    });
    if (res.success) {
      const { data } = res;
      setList(data);
    } else {
      setList([]);
    }
  };

  // 获取地区列表
  const getAreaList = async () => {
    setLoading(true);
    const { success, data = [] } = await getAllArea();
    if (success) {
      data.map(item => {
        item.childs.map(child => {
          child.childs = undefined;
        })
      })
      setAreaData(data);
    }
    setLoading(false);
  }

  const onFinish = () => {
    form.validateFields().then(res => {
      handleSubmitBind({
        ...res,
        accountNo,
        bankType: visible
      });
    })
  }

  const handleSubmitBind = async (params) => {
    if(params.openAddress){
      params.openAddress = params.openAddress.join('');
    }
    setLoading(true);
    const { success } = await personalBindCardOp(params);
    if(success){
      message.success(`绑定${visible == 1 ? '银行卡' : '支付宝'}成功`);
      handleOk();
    }
    setLoading(false);
  }

  return (<CommonModal
    visible={true}
    title={`绑定${visible == 1 ? '银行卡' : '支付宝'}`}
    onOk={onFinish}
    onCancel={handleCancel}
  >

    <Form
      labelCol={{ span: 7 }}
      wrapperCol={{ span: 17 }}
      layout="horizontal"
      form={form}
      scrollToFirstError
    >
      {
        visible == 1 ? (<>
          <Form.Item name="bankName" label="开户行" rules={[{ required: true, message: '开户行不能为空' }]}>
            <Select
              placeholder="请选择"
              optionFilterProp="label"
              showSearch
              allowClear
              style={{ width: 240 }}
            >
              {list.length &&
                list.map((d) => (
                  <Option
                    key={d.superOnlineBanking}
                    value={d.bankName}
                    label={d.bankName}
                  >
                    <Tooltip title={d.bankName}>{d.bankName}</Tooltip>
                  </Option>
                ))}
            </Select>
          </Form.Item>
          <Form.Item name="subBankName" label="支行名称" rules={[{ required: true, message: '支行名称不能为空' }, { pattern: /[\u4e00-\u9fa5]/, message: '请输入中文' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入支行名称，如：杭州支行' maxLength={50} />
          </Form.Item>
          <Form.Item name="bankNo" label="银行卡号" rules={[{ required: true, message: '银行卡号不能为空' }, { pattern: /\d/, message: '请输入数字' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入银行卡号' maxLength={20} />
          </Form.Item>
          <Form.Item name="openAddress" label="开户地" rules={[{ required: true, message: '开户地不能为空' }]}>
            <Cascader style={{ width: 240 }} options={areaData} fieldNames={{ label: 'name', value: 'name', children: 'childs' }} placeholder="请选择地区" />
          </Form.Item>
          <Form.Item name="name" label="开户人" rules={[{ required: true, message: '开户人姓名不能为空' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入开户人姓名' maxLength={30} />
          </Form.Item>
          <Form.Item name="idNumber" label="身份证号" rules={[{ required: true, message: '身份证号不能为空' }, { pattern: /^[0-9a-zA-Z]+$/, message: '请输入数字或字母' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入身份证号' maxLength={20} />
          </Form.Item>
          <Form.Item name="phone" label="手机号" rules={[mobile, { required: true, message: '手机号不能为空' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入手机号' />
          </Form.Item>
        </>) : (<>
          <Form.Item name="bankNo" label="支付宝账号" rules={[{ required: true, message: '支付宝账号不能为空' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入提现支付宝账号' maxLength={50} />
          </Form.Item>
          <Form.Item name="name" label="支付宝真实姓名" rules={[{ required: true, message: '支付宝姓名不能为空' }]}>
            <Input style={{ width: 240 }} autoComplete="off" placeholder='请输入支付宝真实姓名' maxLength={20} />
          </Form.Item>
        </>)
      }
    </Form>
    <span className='common-color13'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：请仔细填写相关信息，避免因填写错误导致出现问题</span>
    <CommonLoading loading={loading} />
  </CommonModal>)
}

export default ChangShuBindCard;